*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth
}
header{
background-color:rgb(147, 196, 249);
/* rgb(147, 196, 249)
rgb(123, 172, 200) */

position:fixed;
z-index:5;
width:100%;
display:flex;
justify-content: space-between;
align-items: center;
padding:10px 200px;

}
.logo{
    text-decoration:none;
    font-size:1.8em;
    font-weight: 700;
    color:rgb(255, 255, 255);
    text-transform:uppercase;
    margin-left: -150px;
    
    
}
.navigation{
    display:flex;
}
.navigation a {
    color:rgb(255, 255, 255);
    text-decoration:none;
    font-size:1.1em;
    font-weight:500;
   margin-left:25px;
}
.navigation a:hover{
    color:purple;
}
section{
    padding:100px 50px;
}
.main{
    width:100%;
    min-height:100vh;
    display:flex;
    background:url(images/building.jpg);
    background-size:cover;
    background-attachment: fixed;
}
.main h2{
    margin-top: 20px;
    color:white;
    font-size:1.4em;
    font-weight: 500;
    
}
.main h2 span {
    margin-top:15px;
    display:inline-block;
    color:rgb(0, 0, 0);
    font-size:3em;
    font-weight: 600;
    animation-name: example;
  animation-duration: 2s;
}
@keyframes example {
  from {color: rgb(29, 189, 234);}
  to {color: rgb(0, 0, 0);}
}
.main h3{
    color:white;
    font-size:2em;
    font-weight:500;
    letter-spacing: 1px;
    margin-top:10px;
    margin-bottom:30px;
}
.mainbutton{
    color:white;
    background-color:rgb(147, 196, 249);
    text-decoration: none;
    font-size:1.1em;
    font-weight:600;
    display:inline-block;
    padding:0.9375em 2.1875em;
    letter-spacing: 1px;
    border-radius: 15px;
    margin-bottom: 40px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.mainbutton:hover{
    background-color:rgb(71, 155, 244) ;
    transform: scale(1.1);
    transition: 0.3s ease;
}
.social-icons a{
   
   padding-top:-15px;
    color:white;
    font-size:1.7em;
    padding-right:30px;
    padding-left:10px;
}
.social-icons a:hover{
    color:rgb(71, 155, 244);
    transition: 0.2s ease;
   
}

.title{
    display:flex;
    justify-content: center;
    color:rgb(3, 205, 250);
    font-size: 2.2em;
    font-weight:800;
    margin-bottom:30px

}
.cards{
    background-color:rgb(0, 0, 0);
}
.cards .contant{
    
    display:flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap:wrap;
    background-color: rgb(0, 0, 0);
    width:100%;
}

.card {
   background-color: rgb(255, 255, 255);
    width:19.25em;
    box-shadow:7px 10px 10px rgb(0, 0, 0);
    margin:15px;
    border-radius: 10px;
    padding:25px; 
}
.card:hover{
    transform:scale(1.08);
    transition: 0.5s ease ;
    background-color: rgb(244, 242, 242);
}
.icon{
    color:rgb(71, 155, 244);
    font-size:6em;
    text-align: center;

}
.info{
    text-align: center;
}
.info h3 {
color:rgb(71, 155, 244);
font-size:1.2em;
font-weight:700;
margin:10px;
}
.line{
position:absolute;
 background-color:pink;
 width:150px;
 height:800px;
 right:50px;
 top:718px;
 height:788px;
 overflow: hidden;

 
}

.projects{
    background-color:rgb(0, 0, 0);
   
}


.projects .contant{
   display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    justify-items:center;
   /* width:140%;
    background-color: bisque;
    margin-left: -150px; */
  
}


.projects-card{
    background-color:rgb(255, 255, 255);
    border:1px solid white;
    min-height:14em;
    width:100%;
    overflow: hidden;
    border-radius:10px;
    margin:20px;
    transition :0.5s ease;
    font-family: Arial, Helvetica, sans-serif;
}
.projects-card:hover{
    transform:scale(1.05);
}
.projects-img img{
width:100%;
height:200px;
object-fit:cover;


}
.projects-card:hover .projects-img{
   
    filter: brightness(1.04);
}
.projects-info{
    padding:1em;
}
.projects-category{
color:black;

}
.project-title{
display:flex;
justify-content: space-between;
text-transform: uppercase;
margin-top:10px;
font-weight: 800;
}
.more-details{
text-decoration: none;

}
.more-details:hover{
    color:purple;
}
.contact {
    background-color:rgb(255, 255, 255);
    display:grid;
    justify-content: center;
    align-items: center;
    gap:50px;
}
.contact .contant{
    display:flex;
   justify-content: center;
    flex-direction: row;
    flex-wrap:wrap;
    background-color: rgb(255, 255, 255);
   
}
.contact .icon{
    font-size:4.5em;
}
.contact .info h3{
    color:black;
}
.contact .info p{
    font-size:1.5em;
}
footer{
    background-color:rgba(157, 190, 226, 0.836);;
    color:rgb(255, 255, 255);
    padding:2em;
    display:flex;
    justify-content: space-between;
}
.footer-title{
    font-size:1.3em;
    font-weight: 600;
    
}
.footer-title span {
    color:rgb(91, 91, 245);
}
.footer .social-icons a{
    font-size:1.3em;
    padding:0 12px 0 0;
}
 
/* PROJECTS GRID */


/* CARDS GRID */
/* .cards .contant{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    justify-items:center;
} */

@media (min-width:1025px){
    .projects{
    display: grid;
    justify-content: center;
    }
   .projects .contant{
       grid-template-columns: repeat(3, 1fr);
     
        width:100%;
   }
}
/* TABLET */
@media(max-width:1024px ) and (min-width:641px){

    .projects{
    display: grid;
    justify-content: center;
    }
    .projects .contant{
    display: grid;
    grid-template-columns: repeat(2, 300px);
    background-color: rgb(0, 0, 0);
     width:140%;
   
}

/* .cards .contant{
    grid-template-columns: repeat(2, 1fr);
} */

}
 
/* MOBILE */
@media(max-width:501px){
.projects{
   
    justify-content: center;
    background-color: rgb(0, 0, 0);
}
.projects .contant{
    grid-template-columns: 1fr;
    width: 80%;
    margin-left: 45px;
    
   
   
}
.projects .contant{
 width: 80%;
}
/* .cards .contant{
    grid-template-columns: 1fr;
} */

section{
    padding:100px 20px;
}



.main h2,
.main h3,
.main a{
    margin-left:0;
}

}

@media screen and (max-width: 500px) {
    header {
      
        padding: 10px;
    }
    .logo {
        margin-left: 0;
        font-size: 1.4em;
       
    }
    .navigation {
        flex-direction: row;
        align-items: center;
        row-gap: 2px;
        font-size: 0.9em;
    }
    .contact .title {
        font-size: 1.5em;
    }
    
    .footer-title{
    font-size:0.7em;
   
    }
    .footer .social-icons a{
    font-size:1.1em;
   
}
.card .info p{
    font-size:1em;
}